<template>
  <div class="myStrategy">
    <div class="nav">
      <nav>
        <el-button type="primary" plain @click="addTactic">新增策略</el-button>
      </nav>
    </div>
    <main>
      <el-table
        :data="relectList"
        align="center"
        style="width: 100%;margin-left: 10px">
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="策略名称"
          width="140"
          align="center">
        </el-table-column>
        <el-table-column
          prop="apiName"
          label="关联api名称"
          width="140"
          align="center">
        </el-table-column>
        <!--        <el-table-column-->
        <!--          prop="createTime"-->
        <!--          label="创建时间"-->
        <!--          align="center"-->
        <!--          width="160"-->
        <!--        >-->
        <!--          <template slot-scope="scope">-->
        <!--            <span>-->
        <!--              {{ scope.row.createTime ? $moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") : '' }}-->
        <!--            </span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column-->
        <!--          prop="createBy"-->
        <!--          label="创建人"-->
        <!--          align="center"-->
        <!--          width="100"-->
        <!--        >-->
        <!--        </el-table-column>-->
        <el-table-column
          prop="logoLinkList"
          label="已开币种"
          align="center">
          <template slot-scope="scope">
             <span class="b-logo">
              <img class="" v-for="item in scope.row.logoLinkList" :src="item">
            </span>

          </template>
        </el-table-column>
        <el-table-column
          prop="mailbox"
          label="通知邮箱"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="300"
        >
          <template slot-scope="scope">
            <!--            <el-button @click="allocation(scope.row)" type="success" size="small">币种配置</el-button>-->
            <span class="btnSpan" @click="allocation(scope.row)"><i class="el-icon-shopping-bag-1"></i>币种配置</span>
            <!--            <el-button @click="updateTactic(scope.row)" type="primary" size="small">编辑策略</el-button>-->
            <span class="btnSpan" @click="updateTactic(scope.row)"><i class="el-icon-edit"></i>编辑策略</span>
            <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="是否确定删除"
              @confirm="deleteTactic(scope.row)"
              style="margin: 0 5px"
            >
              <!--              <el-button slot="reference" type="danger" size="small">删除</el-button>-->
              <span slot="reference" class="btnSpan"><i class="el-icon-delete"></i>删除</span>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </main>
    <!--    新增弹窗-->
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      width="500px"
      center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="策略名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="关联api" prop="apiId">
          <el-select v-model="ruleForm.apiId" placeholder="请选择关联api" :disabled="disabled">
            <el-option
              v-for="item in apikeyList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="通知邮箱" prop="mailbox">
          <el-input v-model="ruleForm.mailbox"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="apiBindBtn('ruleForm')">确 定</el-button>
  </span>
    </el-dialog>
    <!--    币种配置弹窗-->
    <el-dialog width="1800px" title="币种配置" :visible.sync="dialogTableVisible">
      <div class="prompt">
        <p class="sucess">交易模式一定设置为开平仓模式，否则无法开仓。请配置好之后再运行币种</p>
        <p class="eroor">切勿开过多的币种，避免极端单边行情导致爆仓，请根据自身情况调整</p>
      </div>
      <div>
        <ul class="alpha-ul btcAlpha">
          <li v-for="(item,index) in btcBet" :key="index" :class="[btcIndex === index ? 'alpha active' : 'alpha']"
              @click="btcchangeActive(item,index)">{{ item }}
          </li>
        </ul>
      </div>
      <ul class="alpha-ul">
        <li v-for="(item,index) in alphabet" :key="index" :class="[currentIndex === index ? 'alpha active' : 'alpha']"
            @click="changeActive(item,index)">{{ item }}
        </li>
      </ul>
      <el-table :data="gridData"
                align="center"
                style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="logoLink"
                         label="图标"
                         align="center" width="50" alien="center">
          <template slot-scope="scope">
            <span class="b-logo">
              <img :src="scope.row.logoLink">
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="instId"
                         label="币名"
                         align="center" alien="center">
          <template slot-scope="scope">
            <div class="isHotDiv">
              <span>{{ scope.row.instId }}</span>
              <span v-if="scope.row.recommendedFlag!=0" class="isHot">
               <svg t="1719407657870" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="1550" width="200" height="200"><path
                 d="M859.995 460.963c-1.197 10.478-1.197 21.854 0 33.527v88.305c0 160.751-110.161 296.657-258.34 336.17v-52.982c0-49.693-40.112-89.805-89.505-89.805h-0.3c-49.394 0-89.805 40.112-89.805 89.805v52.982c-148.179-39.812-258.04-175.719-258.04-336.17V431.328c39.814 32.33 93.098 91.302 89.805 172.726 33.227-153.267 99.085-176.318 154.764-239.48 72.444-82.321 93.996-172.726 52.386-259.538C641.17 167.6 687.868 409.476 672.901 536.7c64.959-115.251 146.682-146.083 187.094-154.166v78.429z"
                 fill="#FF7B15" p-id="1551"></path></svg>
              </span>
            </div>
          </template>

        </el-table-column>
        <el-table-column prop="firstOpenQuantity"
                         label="首次开仓数量(张)"
                         align="center" alien="center">
        </el-table-column>
        <el-table-column prop="canOpenQuantity"
                         label="可开张数(按倍数计算)"
                         align="center" alien="center">
        </el-table-column>
        <el-table-column prop="minOpenQuantity"
                         label="最小开仓精度"
                         align="center" alien="center">
        </el-table-column>
        <el-table-column prop="multipleQuantity"
                         label="合约倍数"
                         align="center" alien="center">
          <template slot-scope="scope">
            <span>x{{ scope.row.multipleQuantity }}</span>
          </template>

        </el-table-column>
        <el-table-column prop="longProfitRatio"
                         label="多仓止盈比"
                         align="center" alien="center">
          <template slot-scope="scope">
            <span>{{ scope.row.longProfitRatio }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="shortProfitRatio"
                         label="空仓止盈比"
                         align="center" alien="center">
          <template slot-scope="scope">
            <span>{{ scope.row.shortProfitRatio }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="shortFirstOpenRatio"
                         label="空仓首次加仓比例"
                         align="center" alien="center">
          <template slot-scope="scope">
            <span>{{ scope.row.shortFirstOpenRatio }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="longFirstOpenRatio"
                         label="多仓首次加仓比例"
                         align="center" alien="center">
          <template slot-scope="scope">
            <span>{{ scope.row.longFirstOpenRatio }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="shortAddStockRatio"
                         label="空仓后续加仓比例"
                         align="center" alien="center">
          <template slot-scope="scope">
            <span>{{ scope.row.shortAddStockRatio }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="longAddStockRatio"
                         label="多续后续加仓比例"
                         align="center" alien="center">
          <template slot-scope="scope">
            <span>{{ scope.row.longAddStockRatio }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="longAddStockQuantityRation"
                         label="多仓加仓张数比例"
                         align="center" alien="center">
          <template slot-scope="scope">
            <span>{{ scope.row.longAddStockQuantityRation }}%</span>
          </template>
        </el-table-column>

        <el-table-column prop="shortAddStockQuantityRation"
                         label="空仓加仓张数比例"
                         align="center" alien="center">
          <template slot-scope="scope">
            <span>{{ scope.row.shortAddStockQuantityRation }}%</span>
          </template>
        </el-table-column>
        <!--        <el-table-column prop="lever"-->
        <!--                         label="策略最大支持杠杆倍数"-->
        <!--                         align="center" alien="center">-->
        <!--        </el-table-column>-->
        <el-table-column prop="status"
                         label="状态"
                         align="center" alien="center">
          <template slot-scope="scope">
            <span v-if='scope.row.status==0' class="info">未启用</span>
            <span v-if='scope.row.status==1' class="eroor">暂停</span>
            <span v-if='scope.row.status==2' class="sucess">启用</span>
          </template>
        </el-table-column>
        <el-table-column prop="lever"
                         label="是否启用"
                         align="center" alien="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status==2?true:false"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeBtc(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center">
          <template slot-scope="scope">
            <!--            <el-button @click="updateApi(scope.row)" type="primary" size="small">编辑</el-button>-->
            <span class="btnSpan" @click="updateApi(scope.row)"><i class="el-icon-edit"></i>编辑</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="getOptForm.pageNo"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-dialog>
    <!--    设置虚拟币详情信息-->
    <el-dialog width="800px" :title="Inst_title" :visible.sync="dialogInstVisible"
               :style="centerDiolag=true?'instDialog':''">
      <el-form :inline="true" :model="instForm" :rules="instRules" ref="instRules" label-width="160px"
               class="demo-ruleForm">
        <el-form-item label="首次开仓数量" prop="firstOpenQuantity">
          <el-input-number type="number" :step="instForm.minOpenQuantity" :min="instForm.minOpenQuantity"
                           v-model="instForm.firstOpenQuantity"></el-input-number>
        </el-form-item>
        <!--        <el-form-item label="最小开仓精度" prop="minOpenQuantity">-->
        <!--          <el-input v-model.number="instForm.minOpenQuantity"></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="合约倍数" prop="multipleQuantity">
          <el-input-number v-model.number="instForm.multipleQuantity"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓止盈比" prop="longProfitRatio">
          <el-input-number v-model.number="instForm.longProfitRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓止盈比" prop="shortProfitRatio">
          <el-input-number v-model.number="instForm.shortProfitRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓首次加仓比例" prop="shortFirstOpenRatio">
          <el-input-number v-model.number="instForm.shortFirstOpenRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓首次加仓比例" prop="longFirstOpenRatio">
          <el-input-number v-model.number="instForm.longFirstOpenRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓后续加仓比例" prop="shortAddStockRatio">
          <el-input-number v-model.number="instForm.shortAddStockRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓后续加仓比例" prop="longAddStockRatio">
          <el-input-number v-model.number="instForm.longAddStockRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓最大加仓数" prop="longAddStockMaxTime">
          <el-input-number v-model.number="instForm.longAddStockMaxTime"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓最大加仓数" prop="shortAddStockMaxTime">
          <el-input-number v-model.number="instForm.shortAddStockMaxTime"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓加仓张数比例" prop="longAddStockQuantityRation">
          <el-input-number v-model.number="instForm.longAddStockQuantityRation"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓加仓张数比例" prop="shortAddStockQuantityRation">
          <el-input-number v-model.number="instForm.shortAddStockQuantityRation"></el-input-number>
        </el-form-item>
        <!--        <el-form-item label="该策略最大支持杠杆倍数" prop="lever">-->
        <!--          <el-input v-model.number="instForm.lever"></el-input>-->
        <!--        </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="hotB" @click="Recommended" type="success">推荐配置</el-button>
    <el-button @click="dialogInstVisible = false">取 消</el-button>
    <el-button type="primary" @click="putInst('instRules')">确 定</el-button>
  </span>

    </el-dialog>
    <el-drawer
      title="推荐配置"
      :visible.sync="drawer"
      :direction="direction">
      <p class="sucess sucess-title">该推荐配置适用于USDT余额----<span>《500U-2000U》</span>---的用户请根据自身情况修改及使用</p>
      <el-form :inline="true" :model="drawerForm" :rules="drawerRules" ref="instRules" label-width="160px"
               class="demo-ruleForm">
        <el-form-item label="推荐首次开仓数量" prop="recommendedOpenQuantity">
          <el-input-number type="number" :step="drawerForm.minOpenQuantity" :min="instForm.minOpenQuantity"
                           v-model="drawerForm.recommendedOpenQuantity"></el-input-number>
        </el-form-item>
        <!--        <el-form-item label="最小开仓精度" prop="minOpenQuantity">-->
        <!--          <el-input v-model.number="instForm.minOpenQuantity"></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="合约倍数" prop="multipleQuantity">
          <el-input-number v-model.number="drawerForm.multipleQuantity"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓止盈比" prop="longProfitRatio">
          <el-input-number v-model.number="drawerForm.longProfitRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓止盈比" prop="shortProfitRatio">
          <el-input-number v-model.number="drawerForm.shortProfitRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓首次加仓比例" prop="shortFirstOpenRatio">
          <el-input-number v-model.number="drawerForm.shortFirstOpenRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓首次加仓比例" prop="longFirstOpenRatio">
          <el-input-number v-model.number="drawerForm.longFirstOpenRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓后续加仓比例" prop="shortAddStockRatio">
          <el-input-number v-model.number="drawerForm.shortAddStockRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓后续加仓比例" prop="longAddStockRatio">
          <el-input-number v-model.number="drawerForm.longAddStockRatio"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓最大加仓数" prop="longAddStockMaxTime">
          <el-input-number v-model.number="drawerForm.longAddStockMaxTime"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓最大加仓数" prop="shortAddStockMaxTime">
          <el-input-number v-model.number="drawerForm.shortAddStockMaxTime"></el-input-number>
        </el-form-item>
        <el-form-item label="多仓加仓张数比例" prop="longAddStockQuantityRation">
          <el-input-number v-model.number="drawerForm.longAddStockQuantityRation"></el-input-number>
        </el-form-item>
        <el-form-item label="空仓加仓张数比例" prop="shortAddStockQuantityRation">
          <el-input-number v-model.number="drawerForm.shortAddStockQuantityRation"></el-input-number>
        </el-form-item>
        <!--        <el-form-item label="该策略最大支持杠杆倍数" prop="lever">-->
        <!--          <el-input v-model.number="instForm.lever"></el-input>-->
        <!--        </el-form-item>-->
      </el-form>
      <div class="drawerFoot">
        <el-button @click="drawer = false">取 消</el-button>
        <el-button type="primary" @click="drawerInst('drawerRules')">一键应用</el-button>
      </div>
    </el-drawer>
    <!--    币种暂停-->
    <el-dialog
      title="币种暂停"
      :visible.sync="suspenddialogVisible"
      width="600px">
      <span>对该币种进行哪种操作</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="suspenddialogVisible = false">取 消</el-button>
      <el-button type="danger" @click="closeOut('0')">市价全平</el-button>
      <el-button type="primary" @click="closeOut('2')">按止盈比例设置限价平仓</el-button>
        <!--      <el-button type="warning">只暂停什么也不做</el-button>-->
  </span>

      <!--      <span slot="footer" class="dialog-footer">-->
      <!--  </span>-->
    </el-dialog>
  </div>
</template>

<script>
import {ajax} from "@/config/strategy";

export default {
  name: "myStrategy",
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      centerDiolag: false,
      hotB: false,
      suspenddialogVisible: false,
      instForm: {},
      Inst_title: null,
      dialogInstVisible: false,
      total: 0,
      btcIndex: 0,
      currentIndex: -1,
      gridData: null,
      dialogTableVisible: false,
      btcBet: [
        '全部币种',
        '暂停币种',
        '已开币种',
        '热门币种',
      ],
      RecommendedForm: {
        instId: null,
      },
      ishot: false,
      queryRecommendedForm: {
        strategyId: '',
        pageNo: '1',
        pageSize: '10',
        flag: ''
      },
      alphabet: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      disabled: false,
      title: '新增策略',
      centerDialogVisible: false,
      relectList: null,
      apikeyList: null,
      ruleForm: {
        apiId: null,
        name: null,
        mailbox: null
      },
      drawerForm: {},
      updateForm: {
        apiId: null,
        name: null,
        mailbox: null
      },
      getOptForm: {
        pageNo: "1",
        pageSize: "10",
        strategyId: "",
        flag: null,
        status: ''
      },
      closeForm: null,
      rules: {
        apiId: [
          {required: true, message: '请选择关联api', trigger: 'blur'},
        ],
        name: [
          {required: true, message: '请输入策略名称', trigger: 'blur'},
        ],
        mailbox: [
          {required: true, message: '通知邮箱不能为空', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
        ],
      },
      instRules: {
        firstOpenQuantity: [
          {required: true, message: '首次开仓数量不能为空', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (value < this.instForm.minOpenQuantity) {
                callback(new Error('首次开仓数量不能小于最小精度值'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        minOpenQuantity: [
          {required: true, message: '最小开仓精度不能为空', trigger: 'blur'},
        ],
        multipleQuantity: [
          {required: true, message: '合约倍数不能为空', trigger: 'blur'},
        ],
        longProfitRatio: [
          {required: true, message: '多仓止盈比不能为空', trigger: 'blur'},
        ],
        shortProfitRatio: [
          {required: true, message: '空仓止盈比不能为空', trigger: 'blur'},
        ],
        shortFirstOpenRatio: [
          {required: true, message: '空仓首次加仓比例不能为空', trigger: 'blur'},
        ],
        longFirstOpenRatio: [
          {required: true, message: '多仓首次加仓比例不能为空', trigger: 'blur'},
        ],
        shortAddStockRatio: [
          {required: true, message: '空仓后续加仓比例不能为空', trigger: 'blur'},
        ],
        longAddStockRatio: [
          {required: true, message: '多仓后续加仓比例不能为空', trigger: 'blur'},
        ],
        shortAddStockMaxTime: [
          {required: true, message: '空仓最大加仓次数不能为空', trigger: 'blur'},
        ],
        longAddStockQuantityRation: [
          {required: true, message: '多仓加仓张数比例不能为空', trigger: 'blur'},
        ],
        shortAddStockQuantityRation: [
          {required: true, message: '空仓加仓张数比例不能为空', trigger: 'blur'},
        ],
        lever: [
          {required: true, message: '该策略最大杠杆倍数不能为空', trigger: 'blur'},
        ],
      },
      drawerRules: {
        recommendedOpenQuantity: [
          {required: true, message: '推荐首次开仓数量不能为空', trigger: 'blur'},
          {
            validator: (rule, value, callback) => {
              if (value < this.instForm.minOpenQuantity) {
                callback(new Error('推荐首次开仓数量不能小于最小精度值'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        minOpenQuantity: [
          {required: true, message: '最小开仓精度不能为空', trigger: 'blur'},
        ],
        multipleQuantity: [
          {required: true, message: '合约倍数不能为空', trigger: 'blur'},
        ],
        longProfitRatio: [
          {required: true, message: '多仓止盈比不能为空', trigger: 'blur'},
        ],
        shortProfitRatio: [
          {required: true, message: '空仓止盈比不能为空', trigger: 'blur'},
        ],
        shortFirstOpenRatio: [
          {required: true, message: '空仓首次加仓比例不能为空', trigger: 'blur'},
        ],
        longFirstOpenRatio: [
          {required: true, message: '多仓首次加仓比例不能为空', trigger: 'blur'},
        ],
        shortAddStockRatio: [
          {required: true, message: '空仓后续加仓比例不能为空', trigger: 'blur'},
        ],
        longAddStockRatio: [
          {required: true, message: '多仓后续加仓比例不能为空', trigger: 'blur'},
        ],
        shortAddStockMaxTime: [
          {required: true, message: '空仓最大加仓次数不能为空', trigger: 'blur'},
        ],
        longAddStockQuantityRation: [
          {required: true, message: '多仓加仓张数比例不能为空', trigger: 'blur'},
        ],
        shortAddStockQuantityRation: [
          {required: true, message: '空仓加仓张数比例不能为空', trigger: 'blur'},
        ],
        lever: [
          {required: true, message: '该策略最大杠杆倍数不能为空', trigger: 'blur'},
        ],
      },
    }
  },
  mounted() {
    this.getApiList()
    this.getApiKeyList()
  },
  methods: {
    //查询推荐币种配置
    Recommended() {
      this.drawer = true
      ajax.getRecommended(this.RecommendedForm).then(res => {
        this.drawerForm = res.data.data
        console.log(this.drawerForm)
      })
    },
    //推荐确认配置
    drawerInst() {
      let recommendedOpenQuantity = this.drawerForm.recommendedOpenQuantity
      let id = this.instForm.id
      let strategyId
        = this.instForm.strategyId
      this.instForm = this.drawerForm
      this.instForm.firstOpenQuantity = recommendedOpenQuantity
      this.instForm.id = id
      this.instForm.strategyId = strategyId
      this.drawer = false
    },
    //市价全平
    closeOut(row) {
      this.closeForm.cancelType = row
      ajax.unenableBtc(this.closeForm).then(res => {
        const {code, msg} = res.data
        if (code == '00000') {
          this.$message.success(msg)
          this.suspenddialogVisible = false
          this.getOptList()
          this.getApiList()
        } else {
          this.$message.error(msg)
        }

      })
    },
    putInst(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          ajax.putenableBtc(this.instForm).then(res => {
            const {code, msg} = res.data
            if (code == '00000') {
              this.$message.success(msg)
              this.dialogInstVisible = false
              if (this.ishot == true) {
                ajax.queryRecommended(this.queryRecommendedForm).then(res => {
                  this.gridData = res.data.data.records
                  this.total = res.data.data.total
                })
              } else {
                this.getOptList()
              }
              this.getApiList()
            } else {
              this.$message.error(msg)
              this.dialogInstVisible = false
              if (this.ishot == true) {
                ajax.queryRecommended(this.queryRecommendedForm).then(res => {
                  this.gridData = res.data.data.records
                  this.total = res.data.data.total
                })
              } else {
                this.getOptList()
              }
              this.getApiList()
            }

          })
        }
      })
    },
    updateApi(row) {
      if (row.recommendedFlag == 1) {
        this.hotB = true
      } else {
        this.hotB = false
      }
      this.RecommendedForm.instId = row.instId
      this.dialogInstVisible = true
      this.instForm = {
        id: row.id,
        instId: row.instId,
        strategyId: row.strategyId,
        firstOpenQuantity: row.firstOpenQuantity,
        minOpenQuantity: row.minOpenQuantity,
        multipleQuantity: row.multipleQuantity,
        longProfitRatio: row.longProfitRatio,
        shortProfitRatio: row.shortProfitRatio,
        shortFirstOpenRatio: row.shortFirstOpenRatio,
        longFirstOpenRatio: row.longFirstOpenRatio,
        shortAddStockRatio: row.shortAddStockRatio,
        longAddStockRatio: row.longAddStockRatio,
        longAddStockMaxTime: row.longAddStockMaxTime,
        shortAddStockMaxTime: row.shortAddStockMaxTime,
        longAddStockQuantityRation: row.longAddStockQuantityRation,
        shortAddStockQuantityRation: row.shortAddStockQuantityRation,
        lever: row.lever
      }

      this.Inst_title = row.instId + '币种配置'
    },
    handleSizeChange(val) {
      if (this.ishot == true) {
        this.queryRecommendedForm.pageSize = val
        ajax.queryRecommended(this.queryRecommendedForm).then(res => {
          this.gridData = res.data.data.records
          this.total = res.data.data.total
        })
      } else {
        this.getOptForm.pageSize = val
        console.log(this.getOptForm)
        this.getOptList()
      }

    },
    handleCurrentChange(val) {
      if (this.ishot == true) {
        this.queryRecommendedForm.pageNo = val
        ajax.queryRecommended(this.queryRecommendedForm).then(res => {
          this.gridData = res.data.data.records
          this.total = res.data.data.total
        })
      } else {
        this.getOptForm.pageNo = val
        this.getOptList()
      }

    },
    //启用关闭币种事件
    changeBtc(row) {
      const pms = {
        id: row.id,
        instId: row.instId,
        strategyId: this.getOptForm.strategyId
      }
      this.closeForm = {
        id: row.id,
        instId: row.instId,
        strategyId: this.getOptForm.strategyId,

      }
      if (row.status == 0 || row.status == 1) {
        ajax.enableBtc(pms).then(res => {
          const {msg, code} = res.data
          if (code == '00000') {
            this.$message.success(msg)
            if (this.ishot == true) {
              ajax.queryRecommended(this.queryRecommendedForm).then(res => {
                this.gridData = res.data.data.records
                this.total = res.data.data.total
              })
            } else {
              this.getOptList()
            }
            this.getApiList()
          } else {
            this.$message.error(msg)
            if (this.ishot == true) {
              ajax.queryRecommended(this.queryRecommendedForm).then(res => {
                this.gridData = res.data.data.records
                this.total = res.data.data.total
              })
            } else {
              this.getOptList()
            }
          }

        })
      } else {
        this.suspenddialogVisible = true

      }
    },
    btcchangeActive(item, index) {
      this.btcIndex = index;
      this.getOptForm.status = index
      this.getOptForm.flag = null
      this.currentIndex = -1
      this.getOptForm.pageNo = '1'
      if (index == '0') {
        this.getOptForm.status = ''
      }
      if (index == '3') {
        this.ishot = true
        this.queryRecommendedForm.pageNo = '1'
        this.queryRecommendedForm.flag = ''
        this.queryRecommendedForm.pageSize = '10'
        this.queryRecommendedForm.strategyId = this.getOptForm.strategyId
        ajax.queryRecommended(this.queryRecommendedForm).then(res => {
          this.gridData = res.data.data.records
          this.total = res.data.data.total
        })
      } else {
        this.ishot = false
        this.getOptList()
      }
      console.log(this.ishot,'123')
    },
    //点击切换样式
    changeActive(item, index) {
      this.currentIndex = index;
      this.getOptForm.flag = item
      this.queryRecommendedForm.flag = item
      this.getOptForm.pageNo = '1'
      if (this.ishot == true) {
        ajax.queryRecommended(this.queryRecommendedForm).then(res => {
          this.gridData = res.data.data.records
          this.total = res.data.data.total
        })
      } else {
        this.getOptList()
      }

    },
    //币种配置
    allocation(row) {
      this.btcIndex = '';
      this.dialogTableVisible = true
      this.getOptForm.strategyId = row.id
      this.getOptForm.status = ''
      this.getOptForm.flag = null
      this.getOptList()
    },
    //币种列表查询
    getOptList() {
      ajax.getQueryList(this.getOptForm).then(res => {
        this.gridData = res.data.data.records
        this.total = res.data.data.total
      })
    },
    //删除策略
    deleteTactic(row) {
      const pms = {
        id: row.id
      }
      ajax.delTactics(pms).then(res => {
        const {data} = res
        if (data.code == '00000') {
          this.$message.success('删除成功')
          this.getApiList()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    //修改策略
    updateTactic(row) {
      this.title = "编辑策略"
      this.ruleForm = {
        apiId: row.apiId,
        id: row.id,
        name: row.name,
        mailbox: row.mailbox
      }
      this.disabled = true
      this.centerDialogVisible = true
    },
    //获取API策略列表
    async getApiList() {
      await ajax.searchTactics().then(res => {
        const {data} = res
        this.relectList = data
      })
    },
    //获取api列表
    async getApiKeyList() {
      await ajax.apiList().then(res => {
        const {data} = res
        this.apikeyList = data
      })
    },
    //新增策略
    addTactic() {
      this.centerDialogVisible = true
      this.disabled = false
      this.ruleForm = {
        apiId: null,
        name: null,
        mailbox: null
      }
    },
    apiBindBtn(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title == "新增策略") {
            console.log(this.ruleForm)
            ajax.addTactics(this.ruleForm).then(res => {
              const {code, msg} = res.data
              if (code == '00000') {
                this.ruleForm = {
                  apiId: null,
                  name: null,
                  mailbox: null
                }
                this.$message.success(msg)
                this.centerDialogVisible = false
                this.getApiList()
              } else {
                this.$message.error(res.data.msg)
              }
            })
          } else {
            const pms = {
              name: this.ruleForm.name,
              mailbox: this.ruleForm.mailbox,
              id: this.ruleForm.id,
            }
            ajax.putTactics(pms).then(res => {
              const {code, msg} = res
              if (code == '00000') {
                this.ruleForm = {
                  apiId: null,
                  name: null,
                  mailbox: null
                }
                this.$message.success(msg)
                this.centerDialogVisible = false
                this.getApiList()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.drawerFoot {
  display: flex;
  justify-content: flex-end;
}

.instDialog {
  margin: 0 !important;
}

.sucess-title {
  width: 100%;
  text-align: center;

  span {
    color: red !important;
  }


}

.prompt {
  p {
    padding: 4px 20px;
    margin: 8px 20px;
    font-size: 14px;
  }

  .sucess {
    border: 1px solid #529b2e;

  }

  .eroor {
    border: 1px solid #f56c6c;
  }
}

.el-dialog__body {
  padding: 0 !important;
}

.isHotDiv {
  position: relative;

  .isHot {
    width: 40px;
    height: 40px;
    position: absolute;
    right: -10px;
    top: 1px;
    z-index: 99999;

    svg {
      width: 20px;
      height: 20px;
    }
  }

}

.info {
  background-color: #f4f4f5;
  padding: 4px 8px;
  font-size: 12px;
  color: #a2a4a9;
  border-radius: 2px;
}

.sucess {
  background-color: #f0f9eb;
  padding: 4px 8px;
  font-size: 12px;
  color: #82cd5d;
  border-radius: 2px;
}

.eroor {
  background-color: #fef0f0;
  padding: 4px 8px;
  font-size: 12px;
  color: #f78585;
  border-radius: 2px;
}

.myStrategy {
  background-color: #fff;
  min-height: 100%;

  .alpha-ul {
    display: flex;
    margin-left: -20px;

    .alpha {
      //margin: 0 2px;
      padding: 4px 23px;
      cursor: pointer;
      border: 1px solid #b5aeae;
      border-right: none;
      list-style: none;
    }

    .alpha:last-child {
      border-right: 1px solid #b5aeae;
      border-radius: 0 2px 2px 0;
    }

    .alpha:first-child {
      border-radius: 2px 0 0 2px;
    }

    .alpha:hover {
      color: #019dff;
    }

    .active {
      padding: 4px 23px;
      cursor: pointer;
      border: 1px solid #b5aeae;
      border-right: none;
      list-style: none;
      background-color: #019dff;
      color: #fff;
    }

    .active:hover {
      color: #fff;
    }
  }

  .btcAlpha {

    .alpha {
      //margin: 0 2px;
      padding: 8px 23px;
      cursor: pointer;
      border: 1px solid #b5aeae;
      border-right: none;
      list-style: none;
    }

    .alpha:last-child {
      border-right: 1px solid #b5aeae;
      border-radius: 0 4px 4px 0;
    }

    .alpha:first-child {
      border-radius: 4px 0 0 4px;
    }

    .active {
      padding: 8px 23px;
      cursor: pointer;
      border: 1px solid #b5aeae;
      border-right: none;
      //list-style: none;
      background-color: #019dff;
      color: #fff;
    }
  }

  .b-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 25px;
      height: 25px;
      border-radius: 50%;
    }
  }
}
</style>
